<template>
  <div id="schoolroom">
    <div class="head-top">
      <mt-header title="书房">
        <mt-button slot="right">
          <router-link to='search'>
            <img src="../../../static/schoolroom/club/search.png" alt="" width="25px" height="25px" />
          </router-link>
        </mt-button>
      </mt-header>
    </div>

    <div class="box">
      <ul class="tabs">
        <li v-for="(tab,index) in Navbarlist" :key="index">
          <span class="tab-link" @click="tabsSwitch(tab.columnName,tab)" :class="{active:tab.columnName==isActive}">{{tab.columnName}}</span>
        </li>
      </ul>
      <div class="cards">
        <div class="tab-card" v-show="isActive == '图书'">
          <div class="select1">
            <div class="novel" v-for="(item,index) in datalist" :key="index" @click="goToBookList(item.columnId)">
              <div class="novel-content">
                <div class="subtime">
                  <span class="title">{{item.columnName}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-card" v-show="isActive == 1">
          <div class="select1">
            <div class="novel" v-for="(item,index) in datalist1" :key="index">
              <div class="novel-content" @click="goToClass(item.type_name)">
                <div class="subtime">
                  <span class="title">{{item.type_name }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-card" v-show="isActive == 2">
          <mt-loadmore :maxDistance="0" :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">
            <div class="select2">
              <div class="novel1" v-for="(item,index) in datalist2" :key="index">
                <router-link class="novel-content" :to='{name:"newspapercontent", params:{parperdata:JSON.stringify(item)}}'>
                  <img :src="paperImgSrc+(item.max_file_name).substring(0,4)+'.jpg'" alt="" width="51px" height="71" />
                  <div class="subtime">
                    <span class="title">{{item.paper_name}}</span>
                    <span class="num">{{item.term}}</span>
                  </div>
                </router-link>
              </div>
            </div>
          </mt-loadmore>
        </div>
        <div class="tab-card" v-show="isActive == 3">
          <div class="select4">
            <div class="novel4" v-for="(item,index) in datalist3" :key="index">
              <div class="novel-content4" @click="goToVideoClass(item)">
                <div class="subtime4"> 
                  <span class="title">{{item.columnName}}</span>
                </div>
              </div>
            </div>
          </div>
          <!-- <p class="audio">音频</p> -->
          <!-- <div class="select1">
            <div class="novel" v-for="(item,index) in datalist3" :key="index">
              <router-link class="novel-content" to='booklist'>
                <img :src="item.url" alt="" width="51px" height="71" />
                <div class="subtime">
                  <span class="title">{{item.title}}</span>
                  <span class="num">{{item.num}}</span>
                </div>
              </router-link>
            </div>
          </div> -->
        </div>
        <div class="tab-card" v-show="isActive == '悦读'">
          <div class="main">
            <div class="home-main" v-for="(item,index) in datalist4" :key="index">
            <router-link class="read-box" :to='{name:"readcontent",params:{readdata:JSON.stringify(item)}}'>
                <img :src="item.cover" alt="" width="87px" height="58px" />
                <p v-html="item.mainTitle">什么理由让你死心塌地的留在这座城市？</p>
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
    <tabbar></tabbar>
  </div>
</template>

<script>
import tabbar from "./../subcom/tabbar.vue";
import api from "./../../api/api.js";
import { Indicator } from "mint-ui";

export default {
  components: {
    tabbar
  },
  data() {
    return {
      active: false,
      Navbarlist: [], //左侧
      isActive: '图书',
      allLoaded: false,
      pageIndex: 1,
      datalist: [], //图书
      datalist1: [], //期刊
      datalist2: [], //报纸
      datalist3: [], //视听
      datalist4: [] //悦读
    };
  },
  watch:{
  },
  created() {
    this.datevalue = this.formatDate(new Date().getTime()); //时间
    this.paperImgSrc = api.paperImgSrc;
    // this.columnId = localStorage.getItem("swipeableId");
    this.accid = localStorage.getItem("accid");
    this.getNavbar();
    this.getList();
    this.getList1();
    this.getList2();
    this.getList3()
    this.getList4();
  },
  methods: {
    goToVideoClass(item){
      this.$router.push({
        name:"videoclass"
      })
      localStorage.setItem("booktypeid","book"+item.columnId)
    },
    goToBookList(e) {
      this.$router.push({
        name: "booklist"
      });
      localStorage.setItem("booktypeid", "book" + e);
    },
    goToClass(e) {
      this.$router.push({
        name: "periodicalclass"
      });
      localStorage.setItem("type_name", e);
    },
    loadTop: function() {
      //组件提供的下拉触发方法
      //下拉加载
      console.log("下拉");
      this.pageIndex = 1;
      this.getList2();
      this.$refs.loadmore.onTopLoaded(); // 固定方法，查询完要调用一次，用于重新定位
    },
    loadBottom: function() {
      // 上拉加载
      console.log("上拉");
      this.pageIndex++;
      this.getList2();
      this.$refs.loadmore.onBottomLoaded(); // 固定方法，查询完要调用一次，用于重新定位
    },
    tabsSwitch: function(columnName, tab) {
      this.isActive = columnName;
      localStorage.setItem("swipeableId",tab.columnId)
      console.log(tab,123);
    },
    destroyed() {
      localStorage.setItem("swipeableId",0)
    },
        //获取图书列表
    getList3() {
      Indicator.open();
      const userid = localStorage.getItem("userid");
      const accid = localStorage.getItem("accid");
      this.$http({
        method: "post",
        url: api.baseURL + "getColumnNameByFColumnId",
        params: {
          inParam: {
            time: this.datevalue,
            sysCode: "FH_PUBOPE",
            columnId: 27,
            userId: userid,
            terminalType: 1,
            accid: accid
          }
        }
      })
        .then(response => {
          this.datalist3 = response.data.data;
          Indicator.close();
        })
        .catch(error => {
          console.log(error);
          Indicator.close();
        });
    },
    //获取图书列表
    getList() {
      let userid = localStorage.getItem("userid");
      this.$http({
        method: "post",
        url: api.baseURL + "getColumnNameByFColumnId",
        params: {
          inParam: {
            time: this.datevalue,
            sysCode: "FH_PUBOPE",
            columnId: 16,
            userId: userid,
            terminalType: 1,
            accid: this.accid
          }
        }
      })
        .then(response => {
          this.datalist = response.data.data;
        })
        .catch(error => {
          console.log(error);
        });
    },
    //获取报刊列表
    getList1() {
      const userid = localStorage.getItem("userid");
      this.$http({
        method: "post",
        url: api.baseURL + "getCnkiGroupInformation",
        params: {
          inParam: {
            time: this.datevalue,
            sysCode: "FH_PUBOPE",
            group: ["type_name"], //约束条件
            constraint: [],
            userId: userid,
            pageSize: "100",
            currentPage: "1",
            resourceType: "5",
            maxvalue: [] //最大字段
          }
        }
      })
        .then(response => {
          this.datalist1 = response.data.data;
          console.log(this.datalist1);
        })
        .catch(error => {
          console.log(error);
        });
    },
    //获取报纸列表
    getList2() {
      const userid = localStorage.getItem("userid");
      Indicator.open("加载中...");
      this.$http({
        method: "post",
        url: api.baseURL + "getCnkiGroupInformation",
        params: {
          inParam: {
            group: ["paper_name"],
            constraint: [],
            time: this.datevalue,
            userId: userid,
            pageSize: 20,
            allLoaded: false,
            currentPage: this.pageIndex,
            resourceType: 4,
            maxvalue: ["date", "file_name"],
            sysCode: "FH_PUBOPE"
          }
        }
      })
        .then(response => {
          if (response.status == 200) {
            if (this.pageIndex == 1) {
              this.datalist2 = response.data.data;
              console.log(this.datalist2);
            } else {
              let data = this.datalist2;
              this.datalist2 = data.concat(response.data.data);
              console.log(this.datalist2);
            }
            Indicator.close();
          }
        })
        .catch(error => {
          console.log(error);
          Indicator.close();
        });
    },
    getList4() {
      Indicator.open({
        text: "拼命加载中...",
        spinnerType: "triple-bounce"
      });
      this.$http({
        method: "post",
        url: api.baseURL + "getColumResByColumnId",
        params: {
          inParam: {
            accId: 1,
            currentPage: 1,
            terminalType: 1,
            columnId: 12,
            time: this.datevalue,
            pageSize: 30,
            sysCode: "FH_PUBOPE"
          }
        }
      })
        .then(response => {
          this.datalist4 = response.data.data;
          console.log(this.datalist4);

          Indicator.close();
        })
        .catch(error => {
          console.log(error);

          Indicator.close();
        });
    },
    getNavbar() {
      const userid = localStorage.getItem("userid")
      this.$http({
        method: "post",
        url: api.baseURL + "getFirstLevelColumnList",
        params: {
          inParam: {
            time: this.datevalue,
            sysCode: "FH_PUBOPE",
            userId: userid,
            terminalType: 1
          }
        }
      })
        .then(response => {
          const list = response.data.data;
          this.Navbarlist = list;
          // console.log(this.Navbarlist);
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

<style scoped>
.tab-card {
  height: -webkit-calc(100vh - 91px);
  overflow: scroll;
}
.tab-card:nth-child(3){
  height: -webkit-calc(100vh - 91px);
}
.head-top {
  width: 100%;
  z-index: 99;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

#schoolroom {
  width: 100%;
  height: 100%;
}

.box {
  display: flex;
  /*background: #EAEBEE;*/
  padding-top: 45px;
  width: 100%;
  height: calc(100% - 50px);
  /*overflow: hidden;*/
}

.tabs {
  width: 20%;
  list-style: none;
  background-color: #eaebee;
  position: fixed;
  top: 44px;
  left: 0;
}
.tabs .tab-link {
  display: block;
  text-align: center;
  line-height: 50px;
  background-color: #f6f7f9;
  color: #7b7b7b;
  text-decoration: none;
  font-size: 15px;
  margin-bottom: 1px;
  height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tabs .tab-link.active {
  height: 50px;
  border-left: 2px solid #e60012;
  background-color: #ffffff;
  color: #e60012;
}

.cards {
  width: 100%;
  margin-left: 20%;
  height: 100%;
  background-color: #ffffff;
  box-sizing: border-box;
  word-wrap: break-word;
}

.select1 {
  /*height: 100%;*/
  display: flex;
  justify-content: space-between;
  /*background: sandybrown;*/
  flex-wrap: wrap;
  box-sizing: border-box;
  padding-bottom: 50px;
}
.select2 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding-bottom: 50px;
  padding: 20px;
}
.select2 > .novel1 {
  width: 45%;
  border: none;
  margin-bottom: 20px;
}
.novel1 > .novel-content > img {
  width: 100%;
  height: 50px;
  border-radius: 10px;
  box-shadow: darkgrey 2px 2px 5px;
  /* background: darkorange; */
}
.novel {
  padding: 20px 0;
  padding-left: 20px;
  width: 100%;
  border-bottom: 1px solid #efefef;
}

.novel .novel-content {
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
}
.novel .novel-content img {
  border-radius: 8px;
  width: 100%;
}
.novel .subtime span {
  width: 100%;
}
.novel .subtime .title {
  font-size: 15px;
  color: #252525;
  /* margin-bottom: 10px; */
}
.num {
  font-size: 12px;
  color: #a1a1a1;
}
.select4 {
  height: 100%;
  display: flex;
  flex-direction: column;
  /*background: sandybrown;*/
  flex-wrap: wrap;
  box-sizing: border-box;
}
.novel4 {

  /*background: skyblue;*/
}

.novel4 .novel-content4 {
  display: flex;
  padding: 20px 0;
  padding-left: 20px;
  width: 100%;
  border-bottom: 1px solid #efefef;
}

.novel4 .novel-content4 img {
  border-radius: 8px;
}

.novel4 .subtime4 {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-left: 10px;
  width: 64px;
}
.novel4 .subtime4 span {
  /* width: 64px; */
  word-wrap: break-word;
  word-break: normal;
}
.novel4 .subtime4 .title {
  font-size: 15px;
  color: #252525;
  /* margin-bottom: 10px; */
}

.video,
.audio {
  margin-left: 18px;
  border-left: 2px solid #e60012;
  margin-top: 10px;
  line-height: 18px;
  padding-left: 5px;
}
.home-main {
  width: 100%;
  height: auto;
}

.main .read-box {
  width: 95%;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 8px;
  margin: 0 auto;
}

.main .read-box img {
  width: 87px;
  height: 58px;
  margin: 10px 0;
  margin-left: 10px;
  font-size: 15px;
}

.main .read-box p {
  margin-left: 10px;
  padding-right: 16px;
  font-size: 14px;
}
</style>